<template>
  <div class="date-wrap">
    <div 
      class="date-item" 
      v-for="(item, index) in tabOptions" 
      :key="index"
      :class="{active: currentTab === item.key}" 
      @click="handleTabClick(item)">
      {{item.name}}
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'DateTabSelector',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentTab: '',
      defaultTabOptions: [
        {
          key: 'today',
          name: '今日',
          getValue: () => {
            const start = moment().startOf('day')
            const end = moment().endOf('day')
            return [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')]
          }
        },
        {
          key: 'week',
          name: '近7天',
          getValue: () => {
            const start = moment().subtract(6, 'days').startOf('day')
            const end = moment().endOf('day')
            return [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')]
          }
        },
        {
          key: 'month',
          name: '近30天',
          getValue: () => {
            const start = moment().subtract(29, 'days').startOf('day')
            const end = moment().endOf('day')
            return [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')]
          }
        },
        {
          key: 'year',
          name: '近1年',
          getValue: () => {
            const start = moment().subtract(364, 'days').startOf('day')
            const end = moment().endOf('day')
            return [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')]
          }
        }
      ]
    }
  },
  computed: {
    tabOptions() {
      // 如果传入了自定义选项，则使用传入的选项，否则使用默认选项
      return this.options.length > 0 ? this.options : this.defaultTabOptions
    }
  },
  mounted() {
    // 初始化默认选中第一个选项
    if (this.tabOptions.length > 0) {
      this.handleTabClick(this.tabOptions[0])
    }
  },
  methods: {
    handleTabClick(item) {
      this.currentTab = item.key
      
      let dateRange
      
      // 如果选项中有getValue方法，则调用该方法获取日期范围
      if (typeof item.getValue === 'function') {
        dateRange = item.getValue()
      } else {
        // 否则使用默认处理逻辑，这里可以根据需求进行调整
        const now = moment()
        let startDate, endDate
        
        switch (item.key) {
          case 'today':
            startDate = moment().startOf('day')
            endDate = moment().endOf('day')
            break
          case 'week':
            startDate = moment().subtract(6, 'days').startOf('day')
            endDate = moment().endOf('day')
            break
          case 'month':
            startDate = moment().subtract(29, 'days').startOf('day')
            endDate = moment().endOf('day')
            break
          case 'year':
            startDate = moment().subtract(364, 'days').startOf('day')
            endDate = moment().endOf('day')
            break
          default:
            // 对于自定义键，如月、季、年等，可以设定默认值
            startDate = moment().startOf('day')
            endDate = moment().endOf('day')
        }
        
        dateRange = [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')]
      }

      //时间精确到时分秒
      dateRange[0] = moment(dateRange[0]).format('YYYY-MM-DD 00:00:00')
      dateRange[1] = moment(dateRange[1]).format('YYYY-MM-DD 23:59:59')
      
      // 更新 v-model 绑定的值
      this.$emit('update:modelValue', [...dateRange, item.key])
    }
  }
}
</script>

<style lang="scss" scoped>
.date-wrap {
  margin: 4px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .date-item {
    min-width: 64px;
    height: 19px;
    line-height: 19px;
    color: #fff;
    text-align: center;
    background: url(@/assets/images/screen/33.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    margin-left: -4px;
    padding: 0 5px;
    font-size: 14px;
    &.active {
      background: url(@/assets/images/screen/32.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style> 